<template>
    <!-- 授权用户 -->
    <el-dialog title="选择用户" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
        <el-form :model="filters" ref="queryForm" :inline="true">
            <el-form-item label="用户名称" prop="userName">
                <el-input
                    v-model="filters.userName"
                    placeholder="请输入用户名称"
                    clearable
                    size="mini"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="手机号码" prop="mobile">
                <el-input
                    v-model="filters.mobile"
                    placeholder="请输入手机号码"
                    clearable
                    size="mini"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row>
            <Table
                v-model="filters.pageNum"
                :columns="columns"
                :data="tableList"
                :total="total"
                :pageSize="filters.pageSize"
                :loading="loading"
                :ids="userIds"
                @selection-change="selectChange"
                @getPageList="findPageList"
            >
                <template slot="userName" slot-scope="{ scope }">
                    <i class="el-icon-user-solid" style="color:#409EFF" v-if="scope.row.isAdmin === 1"></i>
                    {{ scope.row.userName }}
                </template>
                <template slot="structure" slot-scope="{ scope }">
                    {{ scope.row.companyName }}
                    <br />
                    {{ scope.row.deptName }}
                </template>
                <template slot="isLocked" slot-scope="{ scope }">
                    <el-tag v-if="scope.row.isLocked === 1" size="small" type="danger">禁用</el-tag>
                    <el-tag v-if="scope.row.isLocked === 0" size="small" type="success">启用</el-tag>
                </template>
            </Table>
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="closeDialog">取 消</el-button>
            <el-button type="primary" size="small" @click="handleSelectUser">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { dialogVisible } from '@/mixins/dialogMixin'
import { getUnAuthUserByRole, roleAuthUser } from '@/api/system/user'
export default {
    components: {},
    mixins: [dialogVisible],
    props: {
        roleId: {
            type: [String, Number]
        }
    },
    computed: {},
    watch: {
        dialogVisible(newValue) {
            // 每次打开页面重新加载数据
            if (newValue) {
                this.filters.roleId = this.roleId
                this.findPageList()
                this.userIds = []
            }
        }
    },
    data() {
        return {
            // 遮罩层
            visible: false,
            // 选中数组值
            userIds: [],
            loading: false,
            // 总条数
            total: 0,
            // 未授权用户数据
            tableList: [],
            // 状态数据字典
            statusOptions: [],
            // 查询参数
            filters: {
                pageNum: 1,
                pageSize: 8,
                roleId: undefined,
                userName: undefined,
                mobile: undefined,
                isLocked: 0
            },
            columns: [
                { slot: 'userName', label: '用户名', visible: true, key: 'userName' },
                { prop: 'name', label: '姓名', visible: true, key: 'name' },
                { slot: 'structure', label: '公司/部门', visible: true, key: 'structure' },
                // { slot: 'isLocked', label: '状态', align: 'center', visible: true, key: 'isLocked' },
                { prop: 'mobile', label: '手机', visible: true, key: 'mobile' },
                { prop: 'email', label: '邮箱', visible: true, key: 'email' }
                // { label: '创建人/创建时间', type: 'createUser', visible: true, key: 'createUser' },
                // { label: '更新人/更新时间', type: 'updateUser', visible: true, key: 'updateUser' },
                // { slot: 'oper', label: '操作', align: 'center', minWidth: 130, visible: true, key: 'oper' }
            ]
        }
    },
    created() {},
    methods: {
        handleQuery() {
            this.findPageList()
        },
        resetQuery() {
            this.$refs['queryForm'].resetFields()
            this.filters.pageNum = 1
            this.findPageList()
        },
        selectChange(nodes, ids) {
            this.userIds = ids
        },
        findPageList() {
            this.loading = true
            getUnAuthUserByRole(this.filters)
                .then(res => {
                    this.tableList = res.data.items
                    this.total = res.data.total
                })
                .finally(res => {
                    this.loading = false
                })
        },
        pageChange(page) {
            this.filters.pageNum = page
            this.findPageList()
        },
        handleSelectUser() {
            if (this.userIds.length > 0) {
                roleAuthUser({ roleId: this.roleId, userIdList: this.userIds }).then(res => {
                    this.$emit('submitSuccess')
                    this.closeDialog()
                })
            } else {
                this.$message.warning('请选择用户！')
            }
        }
    }
}
</script>
